<template>
    <!-- <h1>CommonHeader组件</h1> -->
    <el-header>
        <div class="l-content">
            <!-- logo展示 -->
            <el-button size="small" plain @click="handleCollapse">
                <el-icon :size="20">
                    <Menu />
                </el-icon>
            </el-button>
            <!-- 面包屑部分 -->
            <el-breadcrumb separator="/" class="bread">
                <!-- 首页是一定存在的故直接写死 -->
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="current.path" v-if="current">{{ current.label }}</el-breadcrumb-item>
                <!-- <p>{{ current.path }}</p> -->
            </el-breadcrumb>
            <!-- <h3>首页</h3> -->
        </div>

        <div class="r-content">
            <el-dropdown>
                <span class="el-dropdown-link">
                    Dropdown List
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <span class="el-dropdown-link">
                        <img class="user-icon" :src="getImgSrc('user')" alt="">
                    </span>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { mainStore } from '../store/index'
const store = mainStore()

const handleCollapse = () => {
    store.isCollapse = !store.isCollapse
}

const getImgSrc = (user: string) => {
    return new URL(`../assets/img/${user}.jpg`, import.meta.url).href
}

const current  = computed(() => {
    return store.currentMenu
})
// console.log(current.);

</script>

<style scoped lang="less">
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #333;
}

.el-dropdown-link .user-icon {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-size: cover;
}

.l-content {
    display: flex;
    align-items: center;

    h3 {
        color: #fff;
    }
}
.bread :deep(span){
    color:#fff;

}
</style>